vueでtodo appのprototypeを作る練習Log
/icons/hr.icon
最低目標の仕様
データ
予定の名前
予定開始時刻
予定終了時刻
実績開始時刻
実績終了時刻
予定内容の詳細を書いた/icons/Scrapbox.iconのページへのリンク
行動Logを書いた/icons/Scrapbox.iconのページへのリンク 認証あり
UI
タスク作成欄
改行区切りで入力
Shift+Enter
作成ボタンを押すか、Enterキーを押すと作成
YYYY-MM-DDは隠せるようにする
jkキーでタスク選択
Sキーで実績開始時刻を記入
タスク開始
経過時間にどのくらい経過しているか表示される
見積もり時間前なら緑、過ぎたら赤
Eキーで終了時刻を記入
rキーで/icons/Scrapbox.iconページに飛ぶ
セルのクリックで編集できるようにする
projectを作成する
/icons/done.icon/icons/firebase.iconvue-todo-practice
security ruleはtest modeにした
あとで設定する
/icons/done.icon/icons/vue.js.iconvue-todo-practice
linterの設定
/icons/done.icon10:29:49
データの作成
こんな感じのJSON dataが作れればいい
code:todo.json
{
"title": "ひるごはんを食べる",
"description": "${URL}",
"scheduleTime": {start: "${start}", end: "${end}"},
"actualTime": {start: "${start}", end: "${end}"},
"log": "{URL}",
}
10:55:26 できた
/users/{userId}/schedules/{scheduleId}/
code:schedule.json
{
"title": "ひるごはんを食べる",
"description": "${URL}",
"timeSpan": {start: "${start}", end: "${end}"},
"records": {
"log": "{URL}",
},
}
予定と記録は1 to N 対応なので、scheduleにrecordをもたせた
10:58:53 security ruleの設定をした
11:04:02 API keyの設定をした
これだけでは動きそうにない
ログイン画面を作る方法を調べる
13:45:38 とりあえずうごいた
認証するようになった
複数タスクを追加し、それらをリストに表示するようにした
ちゃんとは表示できていない
14:07:51 interfaceを分離したら謎のエラーが出た
Failed to compile.
src/views/Home.vue:130:10
TS2459: Module '"../types/Schedule"' declares 'Schedule' locally, but it is not exported.
128 | import { db } from '@/plugins/firebase';
129 | import { TimeSpan } from '@/types/TimeSpan';
> 130 | import { Schedule } from '@/types/Schedule';
| ^^^^^^^^
131 |
132 | function makeSchedule(docQuery: firestore.QueryDocumentSnapshot): Schedule {
133 | const data = docQuery.data();
わからんtakker.icon
18:41:48 わけわからないので中断する
2020-09-09 00:48:16
↑は再起動したら直った
cacheの問題？
本当に訳わからなすぎる
機能を分割して整理する
認証機能
dataのloading
02:10:11
認証情報とLogin画面を分離した
↑に図解を入れて焼き直した記事
外部に公開するもの
/icons/done.iconデータそのもの
/icons/done.iconデータの追加
データの更新
データの削除
/icons/done.icon更新監視開始
/icons/done.icon更新監視終了
他に分割するやつ
タスクの入力フォーム
タスクの一覧
その他ボタン
タイマー
06:20:52 data管理とlogin状態保持を別のcomponentに分離できた
いい感じ
とりあえずloginまで作った
navbarの見た目を整えたら、commitする
06:54:47 見た目完成
https://gyazo.com/e692ef695f0965c55badc63442913bf0
class名を入れるだけできれいなのが簡単に作れる
便利takker.icon*3
06:57:43 commitする
/icons/done.icon07:00:58
TaskBoard.vueを表示する
新しいrouterとして定義する
07:11:36 出来た
log out後に、taskが残ってしまう問題があることがわかった
log outしたら、schedulesにあるタスクを全て消すことにする
07:21:23 出来た
/icons/done.icon07:39:36 できた
/icons/vue.js.iconコード書く必要があった
そういえば、もうdeploy出来る状態か。
security ruleは厳格にしてあるから、公開して問題ない
07:43:05 じゃあdeployしよう
/icons/done.icon07:45:07 成功！
もう慣れたから簡単になったtakker.icon
/icons/done.icon07:50:42 mobileからの接続&操作確認終了
タスクの編集機能を実装する
とりあえずこれらを実装するか
一括追加
/icons/done.icon08:34:10
+アイコンを押すとテキストエリアが開く
空行は無視
削除
/icons/done.icon08:41:59
更新監視に、削除の監視を入れていなかった
08:57:10 /icons2/smartphone.iconから追加できなかったので、追加できるようにした
shortcut keyだけでは、/icons2/smartphone.iconから操作できない
更に編集機能を追加する
09:45:44 ↑↓キーで項目移動できるようにした
各項目に、配列の番号から生成したidを割り振り、それを使って項目移動を実装した
詳細な時刻表示に使う
11:20:56 いい感じの表になったぞ！！takker.icon*2
https://gyazo.com/6dc135b40aa9f6c10010cceffa199b8f
でもmobileだと途切れちゃう……
11:59:01 タッチでスクロールできたので問題なかった
素晴らしいtakker.icon*3
今すぐ必要な機能ではないので、後でゆっくり考える